<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<meta name="apple-mobile-web-app-capable" content="yes"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/cart.css">
		<!--Vue-->
		<script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
		<!--axios-->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	</head>
	<body>
		<div id="app">
		<header class="header">
		    <span class="headerTitle">购物车</span>
		    <!--<span class="headerRight cart-operation edit">编辑</span>-->
		</header> 
		
		<main class="main">
			
			<div class="cart-block" v-for="(g,index) in cartGoods">
				<div v-if="g.status=='Y'" class="checkbox-wrap">
					<img src="images/tick-s.png" class="tick"><!--选中-->
					<input type="checkbox" name=""  value="" class="checkbox mycheckbox" @click="updateStatus(index)"/>
				</div>
				<div v-if="g.status=='N'" class="checkbox-wrap">
					<img src="images/tick.png" class="tick">
					<input type="checkbox" name=""  value="" class="checkbox mycheckbox" @click="updateStatus(index)"/>
				</div>
				<img :src="g.goodsPicture" class="cart-goods-img">
				<div class="cart-goods-info">
					<p class="cart-goods-name">{{g.goodsName}}</p>
					<p class="cart-goods-sku">{{g.specification}}</p>
					<div class="price-wrap">
						<span>￥<span class="price">{{g.goodsPrice}}</span></span>
						<div class="num-wrap">
							<img src="images/sub.png" class="sub" @click="subQuantity(index)">
							<input type="number" name="" id="num-input" class="num-input" :value="g.quantity" readonly/>
							<img src="images/add.png" class="add" @click="addQuantity(index)">
						</div>
					</div>
				</div>
			</div>

			<!--<div class="cart-block">
				<div class="checkbox-wrap">
					<img src="images/tick.png" class="tick">
					<input type="checkbox" name="" id="" value="" class="checkbox mycheckbox"/>
				</div>
				<img src="images/goods-2.jpg" class="cart-goods-img">
				<div class="cart-goods-info">
					<p class="cart-goods-name">祖玛珑蓝风铃香水 女士 自然清新Jo Malone London</p>
					<p class="cart-goods-sku">600ml</p>
					<div class="price-wrap">
						<span>￥<span class="price">10520</span></span>
						<div class="num-wrap">
							<img src="images/sub.png" class="sub">
							<input type="number" name="" id=" " class="num-input" value="1" readonly/>
							<img src="images/add.png" class="add">
						</div>
					</div>
				</div>
			</div>-->
			
		</main>
		
		
		<div style="height: 0.5rem;"></div>
		<div class="total-wrap">
			<div class="total-left">
				<!--<div class="checkbox-wrap">
					<img src="images/tick.png" class="tick">
					<input type="checkbox" name="" id="" value="" class="checkbox allselect"/>
				</div>-->
				<!--<span>全选</span>-->
			</div>
			<div class="total-right settlement">
				<p>合计:<span class="symbol">￥</span><span class="integer">{{this.total}}</span><span class="point"></span></p>
				<button @click="submitOrder()" type="button" class="total-btn">去结算(<span class="checkedLen">{{this.goodsCount}}</span>)</button>
			</div>
			
			<div class="total-right delete-btn">
				<button type="button" class="total-btn">删除(<span class="checkedLen">0</span>)</button>
			</div>
		</div>
		<footer class="footer">
			<div class="footerItem">
				<a href="../home/index.html">
				<img src="images/index.png" alt=""><br>
				首页
				</a>
			</div>
		    <div class="footerItem footerItemActive">
		        <img src="images/cart-s.png" alt="">
		        购物车
		    </div>
			<div class="footerItem">
				<a href="../user/person.html"><img src="images/mine.png" alt=""></a>
			    我的
			</div>
		</footer>
		</div>
	<script>
		var v = new Vue({
			el:"#app",
			data:{
				quantity:0,
				userData:{},
				cartGoods:[],
				cartStatus:'',
				total:0.0,
				goodsCount:0,
			},
			created(){
				axios.get("http://127.0.0.1:8001/user/userInfo").then(res=>{
					this.userData = res.data;

					axios.post("http://127.0.0.1:8001/cart/queryCart",{
						name : this.userData.name,
					}).then(res=>{
						this.cartGoods = res.data;
						for (let i = 0; i < this.cartGoods.length; i++) {
							var goodItem = this.cartGoods[i];
							if(goodItem.status=='Y'){
								var number = goodItem.quantity;
								var price = goodItem.goodsPrice;
								this.total += number*price;
								this.goodsCount += number;
								console.info("total ==>"+this.total)
							}
						}
					});
				});
			},
			methods:{
				addQuantity(index){
					axios.post("http://127.0.0.1:8001/cart/addGoodCount",{
						cartCode : this.cartGoods[index].cartCode,
					}).then(res=>{
						console.info(res.data)
						this.cartGoods[index].quantity += 1;
						this.total = 0.0;
						for (let i = 0; i < this.cartGoods.length; i++) {
							var goodItem = this.cartGoods[i];
							if(goodItem.status=='Y'){
								var number = goodItem.quantity;
								var price = goodItem.goodsPrice;
								this.total += number*price;
							}
						}
					});
				},
				subQuantity(index){
					axios.post("http://127.0.0.1:8001/cart/subGoodCount",{
						cartCode : this.cartGoods[index].cartCode,
					}).then(res=>{
						console.info(res.data)
						if(this.cartGoods[index].quantity >1){
							this.cartGoods[index].quantity -= 1;
							this.total = 0.0;
							for (let i = 0; i < this.cartGoods.length; i++) {
								var goodItem = this.cartGoods[i];
								if(goodItem.status=='Y'){
									var number = goodItem.quantity;
									var price = goodItem.goodsPrice;
									this.total += number*price;
								}
							}
						}
					});
				},
				updateStatus(index){
					axios.post("http://127.0.0.1:8001/cart/modifyStatus",{
						status:this.cartGoods[index].status,
						cartCode : this.cartGoods[index].cartCode,
					}).then(res=>{
					});
					var theSta = this.cartGoods[index].status;
					if(theSta=='Y'){
						this.cartGoods[index].status = 'N';
					}else{
						this.cartGoods[index].status = 'Y';
					}
					this.total = 0.0;
					this.goodsCount=0;
					for (let i = 0; i < this.cartGoods.length; i++) {
						var goodItem = this.cartGoods[i];
						if(goodItem.status=='Y'){
							var number = goodItem.quantity;
							var price = goodItem.goodsPrice;
							this.total += number*price;
							this.goodsCount += number;
						}
					}
				},
				submitOrder(){
					axios.post("http://127.0.0.1:8001/order/subOrder",{

					}).then(res=>{

					})
					location.href="../order/ordetail.html"
				}
			}
		})
	</script>
	</body>
	<script src="js/jquery.min.js"></script>
	<script src="js/cart.js" type="text/javascript" charset="utf-8"></script>
</html>
